<script setup name="CustomizeTable">
import {getData, getAI} from "@/api/Mine/test"
import TableComponents from '@/components/TableComponents'
import Table from '@/components/TableComponents/VxeTable.vue'
import {ref} from "vue";

const border = ref(true)
const tableData = [
  {id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen'},
  {id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou'},
  {id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai'},
  {id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen'},
  {id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai'},
  {id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 21, address: 'Shenzhen'},
  {id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 29, address: 'Shenzhen'},
  {id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen'}
]
const tableColumn = [
  {field: 'name', title: 'name', slot: true},
  {field: 'sex', title: 'sex',},
  {field: 'address', title: 'Address'}
]

function getDataList() {
  getData().then(res => {
    console.log(res, '测试是否通过')
  });
}

function handleCheckboxAll(val) {
  console.log(val, '复选框全部参数1')


}

function handleCheckboxChange(val) {
  console.log(val, '复选框参数2')

}

function handleRadioChange(val) {
  console.log(val, '单选框参数2')
}
</script>

<template>
  <div>
    <Table
        CustomId="mytable"
        @radio-change="handleRadioChange"
        @checkbox-change="handleCheckboxChange"
        :table-data="tableData"
        :checkbox="true"
        :radio="false"
        @checkbox-all="handleCheckboxAll"
        :table-column="tableColumn">
<!--      vue3中只能写在template  v-solt:name可以简写为#name-->
      <template #name="{row}">
        <div >
          {{ row.name }}
        </div>
      </template>
    </Table>
    <!--    <TableComponents  :border="border" />-->
    <!--    <el-button @click="getDataList">点击le</el-button>-->
  </div>

</template>

<style scoped lang="scss">

</style>
